<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <!-- 顶部 el-header -->
      <el-header style="background-color: rgb(238, 241, 246)">
        <el-title style="font-size: 40px; display: flex; justify-content: center; align-items: center;">
          TLIAS 智能学习辅助系统
        </el-title>
      </el-header>
      <el-container>
        <!-- 左侧列表 el-aside -->
        <el-aside class="el-menu" style="width: 180px; background-color: rgb(238, 241, 246);height: 100%">
          <el-menu :default-openeds="['1', '3']" default-active="2" class="el-menu-vertical-demo"
            style="min-height: 100%; overflow-x:hidden" background-color="rgb(48,65,86)" text-color="#fff"
            active-text-color="#ffd04b" :collapse-transition="false" router :default-active="this.$route.path">
            <div style="height: 40px; line-height: 40px; text-align: center">
              <img src="../assets/logo.png" alt=""
                style="width: 20px; height: 20px; position: relative; top: 5px; margin-right: 4px">
              <b style="color: white">TLIAS 智能学习辅助系统</b>
            </div>

            <el-submenu index="1">
              <template slot="title"><i class="el-icon-document"></i>
                <span slot="title">教师管理</span>
              </template>
              <el-menu-item @click="goToEmpInfo">查询教师信息</el-menu-item>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title"><i class="el-icon-document"></i>
                <span slot="title">课程管理</span>
              </template>
              <el-menu-item @click="goToCourseInfo">查询课程信息</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
          <!-- 条件查询表单 -->
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>

            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit"
              @click="handleAddEmp">
              添加
            </el-button>
          </el-form>



          <!-- 表格 -->
          <el-table :data="tableData" border>
            <el-table-column prop="courseId" label="课程编号" width="180"></el-table-column>
            <el-table-column prop="courseName" label="课程名称" width="180"></el-table-column>

            <!--    <el-table-column label="图像" width="180">
              <template slot-scope="scope">
                <img :src="scope.row.coursePhoto" width="100px" height="70px">
              </template>
            </el-table-column> -->

            <el-table-column prop="teacherName" label="所属教师" width="140">
            </el-table-column>
            <el-table-column label="操作" width="330">
              <template v-slot="{ row }">
                <el-button type="primary" size="mini" @click="handleUpdate(row)">
                  编辑
                </el-button>
                <el-button size="mini" type="danger" @click="handleDelete(row.courseId)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 
                  :title="titleMap[dialogStatus] 通过它来判断显示是添加还是编辑
                  :visible.sync="dialogFormVisible" 控制弹窗是否显示，初始为flase
                  具体逻辑为：
                  1、当用户点击添加按钮时绑定了@click="handleAddEmp"方法，在此方法中把titleMap[dialogStatus]中的dialogStatus状态
                  改为this.dialogStatus = "create",此时窗口的title显示为添加

                  2、当用户点击编辑按钮时绑定了@click="handleUpdate"方法，在此方法中把titleMap[dialogStatus]中的dialogStatus状态
                  改为this.dialogStatus = "update",此时窗口的title显示为编辑

                  3、handleAddEmp和handleUpdate方法只是为了控制弹窗是显示添加还是编辑弹窗，并不是真正的添加和编辑方法向后端发送请求的

                   -->
          <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <!-- ref="dataForm" 校验参数 -->
            <el-form :model="form" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
              <el-form-item label="名称" prop="courseName">
                <el-input v-model="form.courseName" />
              </el-form-item>

              <!--  <el-form-item label="图片" prop="coursePhoto">
                <el-upload class="avatar-uploader" :action="uploadUrl" :auto-upload="false" ref="uploadRef"
                  :before-upload="beforeUpload" :on-change="handleChange">
                  <img v-if="form.coursePhoto" :src="form.coursePhoto" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item> -->

              <el-form-item label="所属教师" prop="classId">
                <el-select v-model="form.teacherId" placeholder="请选择教师">
                  <el-option v-for="item in tableData" :key="item.teacherId" :label="item.teacherName"
                    :value="item.teacherId">
                  </el-option>
                </el-select>
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">
                取消
              </el-button>
              <!-- 判断用户提交的是添加方法还是编辑方法 -->
              <el-button type="primary" @click="dialogStatus === 'create' ? addData() : updateData()">
                确定
              </el-button>
            </div>
          </el-dialog>

          <!-- 分页条 -->
          <!-- 自定义分页
                   handleSizeChange改变展示数量的方法
                   handleCurrentChange  改变分页的方法
                  :current-page 当前页数 
                   page-sizes 初始分页数量
                   total="total 总数量
   -->
          <el-pagination background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[5, 10, 20, 40]"
            :page-size="pageSize" :total="total"><!-- 后端返回的 -->
          </el-pagination>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
//引入自定义的方法，用于调用后端接口
import { getCourseByPage, addCourse, delCourse, updateCourse } from '@/api/course'
export default {
  name: 'Course',
  data() {
    return {
      dialogStatus: " ",//添加或者编辑
      titleMap: {
        update: "编辑",
        create: "添加"
      },
      tableData: [],
      searchForm: {
        name: "",
        gender: ""
      },

      pageNum: 1,
      pageSize: 5,
      total: 0,//总条数
      currentPage: 1,//当前页
      dialogFormVisible: false,
      form: {
        courseName: '',
        teacherId: '',
        teacherName: ''
      },
    }
  },
  methods: {
    //页面跳转 需要用到.catch(err => err) 不然无法正常跳转
    goToCourseInfo() {
      this.$router.push(this.path).catch(err => err)
    },
    //页面跳转
    goToEmpInfo() {
      this.$router.push("/").catch(err => err)
    },
    //监控添加按钮是否触发
    handleAddEmp: function () {
      this.dialogStatus = "create"
      this.dialogFormVisible = true
    },
    async addData() {
      await addCourse(this.form)
        .then((response) => {
          this.dialogFormVisible = false
               // 检查更新是否成功
               if (response.data.code==1) { // 假设response.data.success为布尔值
            // 显示成功提示
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
          } else {
            // 显示错误提示
            this.$message.error('添加失败，请检查网络或输入信息是否正确');
          }
        })
        .catch((error) => {
          console.error('添加信息时发生错误:', error);
          // 显示网络请求异常提示
          this.$message.error('网络请求异常，请稍后再试');
        });
      this.getCourseList()
    },
    //监控编辑按钮是否触发
    handleUpdate: function (row) {
      this.form = row
      this.dialogStatus = "update"
      this.dialogFormVisible = true
    },
    async updateData() {
      await updateCourse(this.form)
        .then((response) => {
          this.dialogFormVisible = false
          // 检查更新是否成功
          if (response.data.code==1) { // 假设response.data.success为布尔值
            // 显示成功提示
            this.$message({
              type: 'success',
              message: '课程信息更新成功!'
            });
          } else {
            // 显示错误提示
            this.$message.error('课程信息更新失败，请检查网络或输入信息是否正确');
          }
        })
        .catch((error) => {
          console.error('更新课程信息时发生错误:', error);
          // 显示网络请求异常提示
          this.$message.error('网络请求异常，请稍后再试');
        });
      this.getCourseList()

    },//监控删除按钮是否触发
    async handleDelete(id) {
      await delCourse(id)
        .then((response) => {
            // 检查更新是否成功
            if (response.data.code==1) { // 假设response.data.success为布尔值
            // 显示成功提示
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else {
            // 显示错误提示
            this.$message.error('删除失败，请检查网络或输入信息是否正确');
          }
        })
        .catch((error) => {
          console.error('删除信息时发生错误:', error);
          // 显示网络请求异常提示
          this.$message.error('网络请求异常，请稍后再试');
        });

      this.getCourseList()

    },
    async getCourseList() {
      await getCourseByPage(this.pageNum, this.pageSize)
        .then((response) => {
          this.tableData = response.data.data.rows;
          this.total = response.data.data.total
        });
    },
    handleSizeChange: function (val) {
      this.pageSize = val //每页展示数量
      this.getCourseList()

    },
    handleCurrentChange: function (val) {
      this.pageNum = val //当前页码
      this.getCourseList()
    }
  },
  /* 
  如果涉及操作DOM，不论是获取还是修改等等，都需要在mounted中执行。不然会由于无法获取到DOM而产生报错。
  如果不涉及DOM操作，可以在created中执行。此时的data数据和methods方法，整个vue实例已经生成。例如修改data，执行不涉及DOM的method。
  */
  mounted() {
    this.getCourseList()
  }
}
</script>

<style></style>